<template>
    <div class="container">
        <div class="head-bar mar-t-10">
            <div class="head-box">
                <div class="head-tabs" v-if="type === '2'" :class="{'tab-post':tabActive === '0','tab-self':tabActive === '1'}">
                    <div class="head-tab mar-t-3" :class="tabActive === '0' ? 'font-w' : ''" @click="tabActive = '0'">快递</div>
                    <div class="head-tab mar-t-3" :class="tabActive === '1' ? 'font-w' : ''" @click="tabActive = '1'">门店自提</div>    
                </div>
                <div class="head-content head-content-post" v-show="(type === '2' && tabActive === '0') || type === '0'">
                    <div class="flex flex-between">
                        <div>
                            <div class="font-15 font-w font-color"><span>Mr.谢</span><span class="mar-l-10">13599599222</span></div>
                            <div class="font-14 font-color-6 mar-t-8">福建省厦门市湖里区仙岳路海西金融广场A座1092</div>
                        </div>
                        <div>
                            <img class="width-5 height-10" v-if="fileSpace" :src="fileSpace + '/images/arrow-right.png'" alt="">
                        </div>
                    </div>
                </div>
                <div class="head-content head-content-self" v-show="(type === '2' && tabActive === '1') || type === '1'">
                    <div class="address-info">
                        <div class="font-12 font-color-9">门店地址:</div>
                        <div class="font-15 font-w font-color mar-t-5">
                            福建省厦门市湖里区仙岳路81号海西金融广场A座1912室
                        </div>
                        <div class="func-bar font-14 font-color pad-t-16 pad-b-20">
                            <div class="flex flex-center" @click="$pt.setClipboardData({data: '福建省厦门市湖里区仙岳路81号海西金融广场A座1912室'})">
                                <img class="width-15 height-15" v-if="fileSpace" :src="fileSpace + '/images/confirm-order-copy.png'" alt="">
                                <span class="mar-l-10">复制地址</span>
                            </div>
                            <div class="flex flex-center">
                                <img class="width-12 height-15" v-if="fileSpace" :src="fileSpace + '/images/finish-address.png'" alt="">
                                <span class="mar-l-10">门店导航</span>
                            </div>
                        </div>
                    </div>
                    <div class="flex flex-between mar-t-14">
                        <div>营业时间：09:00-18:00</div>
                        <div class="flex flex-center relation-phone">
                            <img class="width-15 height-15" v-if="fileSpace" :src="fileSpace + '/images/oeder-details-postphone.png'" alt="">
                            <span class="mar-l-5 font-color-6">联系卖家</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="shop-bar">
            <div class="order-row flex">
                <div class="img-box">
                    <img :src="fileSpace + '/images/oeder-details-postphone.png'" alt="" v-if="fileSpace" class="width-90 height-90">
                </div>
                <div class="width-240 shop-content">
                    <div class="line-2 font-14 font-color">
                        暑假热卖 英国旅游 英格兰+苏格兰4日纯玩跟团旅游 赠中文导游
                    </div>
                    <div class="font-color-9 select-content font-12"></div>
                    <div class="flex flex-between font-color">
                        <span class="font-14 font-w">￥499.00</span>
                        <van-stepper :value="value" @change="onChange" :integer="true" />
                    </div>
                </div>
            </div>
            <div class="pad-t-15 pad-b-15">
                <div class="font-14 flex flex-between">
                    <div class="font-color">商品小计</div>
                    <div class="font-red font-w">￥4990.00</div>
                </div>
                <div class="font-14 font-color flex flex-between mar-t-4" v-show="(type === '2' && tabActive === '0') || type === '0'">
                    <div>运费</div>
                    <div>￥10.00</div>
                </div>
            </div>
        </div>
        <div class="remark-box">
            <span>买家留言</span><input style="width:75%;" class="mar-l-25" maxlength="50" placeholder="50字以内  (选填)" />
        </div>
        <div class="relation-bar flex flex-between" v-show="(type === '2' && tabActive === '0') || type === '0'">
            <div class="flex flex-between">
                <div class="img-box">
                    <img class="width-33 height-33" v-if="fileSpace" :src="fileSpace + '/images/oeder-details-postphone.png'" alt="">
                </div>
                <div class="font-14 font-color mar-l-8">我是卖家，有事请联系我~</div>
            </div>
            <div class="flex flex-center relation-phone">
                <img class="width-15 height-15" v-if="fileSpace" :src="fileSpace + '/images/oeder-details-postphone.png'" alt="">
                <span class="mar-l-5 font-color-6">联系卖家</span>
            </div>
        </div>
        <div class="total-bar">
            <div class="mar-l-9">
                <div class="font-15 font-w flex">
                    <span>合计：</span>
                    <div class="font-red">
                        <span class="font-12">￥</span><span>4990.00</span>
                    </div>
                </div>
                <div class="font-color-9">共10件</div>
            </div>
            <div>
                <button class="confirm-btn">确认支付</button>
            </div>
        </div>
    </div>
</template>
<script>
export default {
  data() {
    return {
      type: '2',
      tabActive: '0',
      value: 1
    }
  },
  methods: {
    onChange() {}
  }
}
</script>
<style lang="less" scoped>
.container{
    padding: 0 8px 75px;
    width: unset;
    .head-bar{
        .head-box{
            border-radius: 7px;
            overflow: hidden;
            .head-tabs{
                display: flex;
                justify-content: center;
                align-items: center;
                background-size: 100%;
                background-repeat: no-repeat;
                height: 45px;
                .head-tab{
                    width: 50%;
                    height: 45px;
                    line-height: 45px;
                    text-align: center;
                }
            }
            .tab-post{
                background-image: url('https://veekrayimg.joinsun.vip/images/order-details-tab-1.png');
            }
            .tab-self{
                background-image: url('https://veekrayimg.joinsun.vip/images/order-details-tab-2.png');
            }
        }
        
        .head-content{
            // height: 95px;
            background: white;
        }
        .head-content-post{
            padding: 25px 8px;
            background-image: url('https://veekrayimg.joinsun.vip/images/order-details-dividing.png');
            background-repeat: no-repeat;
            background-position-y: 100%;
        }
        .head-content-self{
            padding: 14px 8px 15px;
            .address-info{
                border-bottom: 1px solid #ededed;
                .func-bar{
                    display: flex;
                    justify-content: space-around;
                    align-items: center;
                }
            }
            .relation-phone{
                padding: 5px 13px 5px 11px;
                border: 1px solid #ededed;
                border-radius: 20px;
            }
        }
    }
    .shop-bar{
        background: white;
        padding: 0 8px;
        margin-top: 8px;
        border-radius: 7px;
        .order-row{
            border-bottom: 1px solid #ededed;
            padding: 15px 0;
            justify-content: space-between;
            .img-box{
                // background: yellow;
            }
            .shop-content{
                display: flex;
                flex-direction: column;
                justify-content: space-between;
                min-height: 90px;
            }
            .select-content{
                background: #f2f2f2;
                padding-left: 5px;
                margin: 5px 0;
            }
            /deep/ .van-stepper__input-wrapper{
                height: 20px;
                width: 59px;
                font-size: 11px;
                color: #333;
                background: #f5f5f5;
            }
            /deep/ .van-stepper__minus,
            /deep/ .van-stepper__plus{
                height: 20px;
                width: 20px;
                color: #333;
                background: #f5f5f5;
                margin: 0 5px;
            }
        }
        .line-1{
            line-height: 1.4;
        }
        .line-2 {
            line-height: 1.4;
            height: unset;
        }
    }
    .remark-box{
        border-radius: 7px;
        display: flex;
        justify-content: left;
        align-items: center;
        background: white;
        padding: 10px 8px;
        margin-top: 8px;
    }
    .relation-bar{
        background: white;
        border-radius: 7px;
        margin-top: 8px;
        padding: 12px 8px;
        .relation-phone{
            padding: 5px 13px 5px 11px;
            border: 1px solid #ededed;
            border-radius: 20px;
        }
        .img-box{
            border-radius: 50%;
            background: yellow;
        }
    }
    .total-bar{
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 7px 8px;
        background: white;
        border-top: 1px solid #c5c5c5;
        position: fixed;
        width: calc(100% - 16px);
        left: 0;
        bottom: 0;
        z-index: 9;
        .confirm-btn{
            border-radius: 20px;
            height: 35px;
            width: 109px;
            line-height: 35px;
            font-size: 15px;
            color: #333;
            background: #f8c400;
            &::after{
                border: unset;
            }
        }
    }
    
}
.all-post{
    // 两者都有 快递选项
}
.all-self{
    // 两者都有 自取选项
}
.post{

}
.self{

}
</style>
